<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-08-18 10:03:37
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2023-10-13 10:43:19
 * @Description: 首页
 * @FilePath: \tuanfeng-mini\src\pages\index.vue
-->
<template>
    <div class="container">
        <div class="nowdate">{{nowDate}}</div>
        <div class="banner-box">
            <image class="banner" mode="aspectFit" src="https://tuanfeng.whkxzj.com/profile/static/20230110141404-banner.png"></image>
        </div>
        <div class="news">
            <div class="more" @click="toPage('pages/articles',  {id: '1', title: '最新动态'})">更多</div>
            <div class="text-container">
                <div class="marquee-box" :class="{ scrollmarquee: scrollMarquee }">
                    <div class="marquee-text" @click="toPage('pages/article_detail', {title: '最新动态', id: list[flag-1].id})">
                        <span>{{curMarqueeText}}</span>
                    </div>
                    <div class="marquee-text next" @click="toPage('pages/article_detail', {title: '最新动态', id: list[flag-1].id})">
                        <span>{{nextMarqueeText}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="grids">
            <div class="grid" style="margin-bottom: 15px" @click="toPage('pages/government_news')">
                <img class="icon" src="https://tuanfeng.whkxzj.com/profile/static/20230110141618-政务动态.png" />
                <div class="text">政务动态</div>
            </div>
            <div class="grid" style="margin-bottom: 15px" @click="toPage('pages/complaintPlatform/index')">
                <img class="icon" src="https://tuanfeng.whkxzj.com/profile/static/20231115090438-投诉平台.png" />
                <div class="text">投诉平台</div>
            </div>
            <div class="grid" style="margin-bottom: 15px" @click="toPage('pages/chiefServer/index')">
                <img class="icon" src="https://tuanfeng.whkxzj.com/profile/static/20231115090819-首席服务员.png" />
                <div class="text">首席服务员</div>
            </div>
            <div class="grid" style="margin-bottom: 15px" @click="toPage('pages/gangEasyMake/index')">
                <img class="icon" src="https://tuanfeng.whkxzj.com/profile/static/20231115091639-冈好办.png" />
                <div class="text">冈好办</div>
            </div>
            <div class="grid" @click="toPage('pages/tuanOnline/index')">
                <img class="icon" src="https://tuanfeng.whkxzj.com/profile/static/20231115092026-小团在线.png" />
                <div class="text">小团在线</div>
            </div>
            <div class="grid" @click="toPage('pages/firmAgent/index')">
                <img class="icon" src="https://tuanfeng.whkxzj.com/profile/static/20231115092514-企业帮代办.png" />
                <div class="text">企业帮代办</div>
            </div>
            <div class="grid" @click="toPage('pages/apanage')">
                <img class="icon" src="https://tuanfeng.whkxzj.com/profile/static/20231013103019-IfXcl33h6CIy46d1a4a20260f40e0aeacde94fc809f3.png" />
                <div class="text">属地管理</div>
            </div>
            <div class="grid" @click="toPage('pages/more')">
                <img class="icon" src="https://tuanfeng.whkxzj.com/profile/static/20230110142918-更多服务.png" />
                <div class="text">更多服务</div>
            </div>
        </div>
        <img class="bar" src="https://tuanfeng.whkxzj.com/profile/static/20230110143656-1666086254692.png"/>
        <div class="vr-box">
            <img class="vr" src="https://tuanfeng.whkxzj.com/profile/static/20230110143724-1666086264172.png" />
            <div class="block left1" @click="toPage('pages/vr', {def_sid: 1812908})"></div>
            <div class="block left2" @click="toPage('pages/vr', {def_sid: 1812919})"></div>
            <div class="block left3" @click="toPage('pages/vr', {def_sid: 1812904})"></div>
            <div class="block center" @click="toPage('pages/vr', {})"></div>
            <div class="block right1" @click="toPage('pages/vr', {def_sid: 1812881})"></div>
            <div class="block right2" @click="toPage('pages/vr', {def_sid: 1812891})"></div>
            <div class="block right3" @click="toPage('pages/vr', {def_sid: 1812870})"></div>
        </div>
        <div class="tip">
            <div>周一至周五，上午8：30-12：00，下午14：00-17：30</div>
            <div>(国家法定节假日除外)</div>
        </div>
    </div>
</template>
<script>
import { getLatestArtAPI } from "../api/article";
import { miniPVAPI } from "../api/stat";
import { mapState, mapMutations, mapActions } from "vuex";

export default {
    data(){
        return {
            list: [],
            flag: 1,
            
            scrollMarquee: false, // 跑马灯动画
            nextMarqueeText: "", // 下一条跑马灯文案
            curMarqueeText: "", // 当前跑马灯文案
            nowDate: '',
        }
    },
    onShareAppMessage(){},
    onLoad(){
        // 同步存储数据
        this.checkUserState();

        // 查询最新公告
        wx.showLoading({
            title: "加载中...",
        });
        getLatestArtAPI().then((res) => {
            this.list = res.data;
            wx.hideLoading();
            this.runMarquee();
        });

        // 首页pv
        miniPVAPI();

        this.getDate();
    },
    methods: {
        ...mapMutations(["checkUserState"]),
        toMini(){
            wx.navigateToMiniProgram({
                appId: 'wxcc21ccd840d613f5'
            })
        },
        toPage(path, payload){
            this.$u.route({
                url: path,
                params: payload
            });
        },
        // 跑马灯
        runMarquee() {
            // 没有最新动态时展示
            if(!this.list.length) {
                this.curMarqueeText = "暂无公告";
                return false
            } else {
                this.curMarqueeText = this.list[0].title + " " + this.list[0].publishTimeStr;
            }
            
            // 只有一条公告时不轮播
            if(this.list.length === 1) {
                return false
            }

            // 公告大于一条时，轮播全部数据
            setInterval(() => {
                if(this.flag >= this.list.length) this.flag = 0; 
                this.nextMarqueeText = this.list[this.flag].title + " " + this.list[this.flag].publishTimeStr;
                this.scrollMarquee = true;

                setTimeout(() => {
                    this.curMarqueeText = this.nextMarqueeText;
                    this.nextMarqueeText = "";
                    this.scrollMarquee = false;
                }, 490);
                this.flag++;
            }, 4500);
        },
        // 获取日期
        getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var weekNumber = date.getDay();
            var week = "星期" + ['日', '一', '二', '三', '四', '五', '六'][weekNumber];
            this.nowDate = year + "-" + month + "-" + day + " " + week;
        },
    }
};
</script>
<style scoped lang="scss">
.container {
    min-height: 100vh;
    background-image: url("https://tuanfeng.whkxzj.com/profile/static/20230110143753-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-color: #023884;
    display: flex;
    flex-direction: column;
    align-items: center;
    .nowdate {
        color: #fff;
        margin: 10px 0 -5px -200px;
    }
    .banner-box{
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        .banner{
            height: 150px;
            width: 100%;
        }
    }
    .news{
        width: 350px;
        height: 71.2px;
        margin: 5px 0 10px;
        background-image: url('https://tuanfeng.whkxzj.com/profile/static/20230110143819-最新动态.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        .text-container{
            width: 220px;
            height: 40px;
            color: #fff;
            font-size: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            .scrollmarquee {
                animation: scrollmarquee linear 0.5s 1;
            }
            .marquee-box {
                display: flex;
                flex-direction: column;
                height: 80px;
                .marquee-text {
                    flex: none;
                    height: 40px;
                    line-height: 20px;
                    text-align: left;
                    color: #fff;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                }
            }
        }
        .more{
            color: #0bcfff;
            line-height: 40px;
            margin: 0 15px;
        }
    }
    .grids {
        display: flex;
        flex-wrap: wrap;
        padding: 0 5px;
        margin-bottom: 30px;
        .grid {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .icon {
               width: 50px;
               height: 50px;
               margin-bottom: 8px;
            }
            .text {
                color: #fff;
                text-align: center;
                font-size: 13px;
            }
        }
    }
    .bar{
        width: 95vw;
        height: 8.088vw;
        margin-bottom: 10px;
    }
    .vr-box{
        position: relative;
        .block{
            width: 20vw;
            height: 40px;
            position: absolute;
        }
        .left1{
            left: 30px;
            top: 30px;
        }
        .right1{
            right: 30px;
            top: 30px;
        }
        .left2{
            left: 20px;
            top: 90px;
        }
        .right2{
            right: 20px;
            top: 90px;
        }
        .left3{
            left: 30px;
            top: 150px;
        }
        .right3{
            right: 20px;
            top: 150px;
        }
        .center{
            top: 30px;
            left: 50%;
            margin-left: -25vw;
            width: 50vw;
            height: 140px;
        }
        .vr{
            width: 100vw;
            height: 61.33vw;
        }
    }
    .tip{
        text-align: center;
        font-size: 13px;
        color: #fff;
        margin-bottom: 20px;
    }
}

@keyframes scrollmarquee {
    0% {
        margin-top: 0;
    }
    100% {
        margin-top: -40px;
    }
}
</style>